<template>
	<view class="content">
		<form @submit="formSubmit">
			<view class="content-item">
				<view class="content-item__title">真实姓名</view>
				<view class="content-item__input">
					<input
						type="text"
						placeholder="请输入真实姓名"
						v-model="form.name"
						name="name"
					/>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item__title">支付宝账户</view>
				<view class="content-item__input">
					<input
						type="text"
						placeholder="请输入支付宝账户"
						v-model="form.account"
						name="account"
					/>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item__title">手机号</view>
				<view class="content-item__input">
					<input
						type="number"
						placeholder="请输入手机号"
						v-model="form.phone"
						name="phone"
						maxlength="11"
						:disabled="disabled"
					/>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item__title">验证码</view>
				<view class="content-item__input">
					<input
						type="text"
						maxlength="4"
						placeholder="请输入验证码"
						v-model="form.phoneCode"
						name="phoneCode"
					/>
				</view>
				<view class="getCode" @tap="getCode" v-if="isYzm">获取验证码</view>
				<view class="getCode" v-else>{{ yzmNum }}s</view>
			</view>
			<view class="content-tips">填写正确联系方式，确保审核人员可联系！</view>
			<view class="content-btn">
				<view class="content-btn__updata" v-if="disabled" @tap="upPhone">修改手机号</view>
				<button form-type="submit" class="content-btn__submit">确认</button>
			</view>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
				account: '',
				phone: '',
				phoneCode: ''
			},
			disabled: false, //判断是否绑定过，绑定过就不能在此修改，点击修改跳页面
			isYzm: true,
			yzmNum: 60
		};
	},

	onShow() {
		this.getAliInfo();
	},

	methods: {
		getAliInfo() {
			this.$service.common.user
				.testingAli()
				.then(res => {
					this.whether = res.whether;
					if (res.whether == 1) {
						this.disabled = true;
						this.$service.member.aliAccount
							.info()
							.then(res => {
								this.form.name = res.name;
								this.form.account = res.account;
								this.form.phone = res.phone;
							})
							.catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								});
							});
					} else {
						this.disabled = false;
					}
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},
		upPhone() {
			this.$Router.push({
				path: '/pages/member/updatePhone',
				query: {
					phone: this.form.phone
				}
			});
		},
		getCode() {
			if (!this.form.phone) {
				uni.showToast({
					title: '请填写手机号',
					icon: 'none'
				});
				return false;
			}
			if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
				uni.showToast({
					title: '手机号格式不对',
					icon: 'none'
				});
				return false;
			}
			this.$service.common.common
				.getCode({
					phone: this.form.phone
				})
				.then(res => {
					uni.showToast({
						title: '发送成功'
					});
					this.successCode();
				})
				.catch(err => {
					if (err.message.includes('触发')) {
						uni.showToast({
							title: '请求太多，请稍后再试',
							icon: 'none'
						});
						return false;
					}
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},
		successCode() {
			this.isYzm = false;
			let yzmNum = this.yzmNum;
			let setTimer = setInterval(() => {
				this.yzmNum = yzmNum--;
				if (yzmNum <= 0) {
					clearInterval(setTimer);
					this.isYzm = true;
					this.yzmNum = 60;
				}
			}, 1000);
		},
		formSubmit(e) {
			let type = this.disabled;
			if (type) {
				if (!e.detail.value.name || !e.detail.value.account || !e.detail.value.phoneCode) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return false;
				}

				this.$service.member.aliAccount
					.update({
						name: e.detail.value.name,
						account: e.detail.value.account,
						account: e.detail.value.account,
						oldPhone: e.detail.value.phone,
						oldPhoneCode: e.detail.value.phoneCode
					})
					.then(res => {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
						setTimeout(() => {
							this.$Router.back(1);
						}, 1000);
					})
					.catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
			} else {
				if (
					!e.detail.value.name ||
					!e.detail.value.account ||
					!e.detail.value.phone ||
					!e.detail.value.phoneCode
				) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return false;
				}

				this.$service.member.aliAccount
					.add({
						...e.detail.value
					})
					.then(res => {
						uni.showToast({
							title: '绑定成功',
							icon: 'none'
						});
						setTimeout(() => {
							this.$Router.back(1);
						}, 1000);
					})
					.catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.content {
	height: 100vh;
	background: #f6f7fa;
	overflow: hidden;
	.content-item {
		width: 698rpx;
		height: 100rpx;
		margin: auto;
		border-radius: 16rpx;
		background: #ffffff;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		.content-item__title {
			color: #717076;
			margin-left: 42rpx;
			width: 160rpx;
		}
		.content-item__input {
			color: #221d2c;
			flex: 1;
			margin: 0 28rpx;
		}
		.getCode {
			color: #0160f7;
			margin: 0 24rpx;
		}
	}
	.content-tips {
		font-size: 24rpx;
		color: #717076;
		margin-left: 68rpx;
		margin-top: 20rpx;
	}
	.content-btn {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 56rpx;
		font-size: 28rpx;

		.content-btn__updata {
			width: 300rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			color: #f70114;
			border: 1px solid #f70114;
		}
		.content-btn__submit {
			width: 300rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			background: #f70114;
			color: #ffffff;
		}
	}
}
</style>
